<template>
    <div>
        <h1 class='title'>
            <i class='el-icon-warning'></i>
            <span>条件查找</span>
        </h1>
        <el-form ref="form" :model="form" label-width="80px" :inline="true">
            <el-form-item label="录入人">
                <el-select filterable v-model="form.inputman" placeholder="录入人" :disabled="this.scope < this.zuzhang_scope?true:false">
                    <el-option 
                    label="默认"
                    value=""
                    ></el-option>
                    <el-option 
                    v-for="item in form.belongList" 
                    :key="item.id" 
                    :label="item.belongname" 
                    :value="item.belongname"></el-option>
                
                </el-select>
            </el-form-item>
            
            <el-form-item label="客户电话">
                <el-input
                placeholder="客户电话"
                v-model="form.phone"
                clearable>
                </el-input>
            </el-form-item>
            <el-form-item label="楼盘地址">
                <el-input
                placeholder="楼盘地址"
                v-model="form.local"
                clearable>
                </el-input>
            </el-form-item>
            <el-form-item label="订单状态">
                <el-select filterable v-model="form.checkedFollow" placeholder="订单状态" >
                    <el-option 
                    label="默认"
                    value=""
                    ></el-option>
                    <el-option 
                    v-for="item in form.follow" 
                    :key="item" 
                    :label="item" 
                    :value="item"></el-option>
                
                </el-select>
            </el-form-item>
            <el-form-item label="时间">
                <el-date-picker
                v-model="timeValue"
                type="datetimerange"
                :picker-options="pickerOptions2"
                range-separator="至"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                align="right">
                </el-date-picker>
            </el-form-item>
            
            

            
            <el-form-item>
                <el-button type="primary" @click="onSubmit">搜索</el-button>
               
            </el-form-item>
        </el-form>
        <el-table
        height="550"
        :data="data"
        style="width: 100%">
            <el-table-column type="expand">
                <template slot-scope="props">
                    <el-form label-position="left" inline class="demo-table-expand">
                    <el-form-item label="录入时间">
                        <span>{{ props.row.create_time }}</span>
                    </el-form-item>
                    <el-form-item label="合同时间">
                        <span>{{new Date(parseInt(props.row.contract_time) * 1000).toLocaleString().replace(/:\d{1,2}$/,' ')  }}</span>
                    </el-form-item>
                    <el-form-item label="客户名">
                        <span>{{ props.row.username }}</span>
                    </el-form-item>
                    <el-form-item label="地区">
                        <span>{{ props.row.belongs.local }}</span>
                    </el-form-item>
                    <el-form-item label="订金金额">
                        <span>{{ props.row.price }}</span>
                    </el-form-item>
                     <el-form-item label="合同金额">
                        <span>{{ props.row.contract }}</span>
                    </el-form-item>
                    <el-form-item label="折扣">
                        <span>{{ props.row.discount }}</span>
                    </el-form-item>

                     <el-form-item label="订单图集">
                        
                         <img 
                    v-for="(item) in props.row.imgs" 
                    :key="item.id"  
                    :src="item.img_url.url" alt="" style="width: 50px;height: 50px">
                    </el-form-item>
                    
                    
                    
                    
                    <el-form-item label="指定导购">
                        <span>{{ props.row.guider }}</span>
                    </el-form-item>
                    <el-form-item label="录入人">
                        <span>{{ props.row.inputman }}</span>
                    </el-form-item>
                   
                    
                    <el-form-item label="备注" >
                        <div v-html="props.row.remarks"></div>
                    </el-form-item>

                    </el-form>
                </template>
            </el-table-column>

            <el-table-column
           
            prop="id"
            label="id"
            width="50">
            </el-table-column>
            <el-table-column
            prop="belongs.belongname"
            label="客户归属"
            width="100">
            </el-table-column>
            <el-table-column
            prop="use"
            label="是否有效"
            width="100">
            </el-table-column>
            <el-table-column
            :filters="inputFilters"
            :filter-method="filterInputer"
            filter-placement="bottom-end"
            prop="inputman"
            label="录入人"
            width="100">
            </el-table-column>

            <el-table-column
            prop="username"
            label="客户名"
            width="100">
            </el-table-column>
            <el-table-column
            prop="local"
            label="楼盘"
            width="100">
            </el-table-column>
            <el-table-column
            prop="function"
            label="渠道"
            width="100">
            </el-table-column>
            <el-table-column
            prop="buy"
            label="客户需求"
            width="100">
            </el-table-column>
            <el-table-column
            prop="phone"
            label="电话"
            width="180">
            </el-table-column>
            
             <el-table-column
            prop="follow"
            width="80"
            label="订单状态">
            </el-table-column>
            <el-table-column
            prop="gifts"
            label="订单礼">
            </el-table-column>
           

            <el-table-column
            width="100"
            label="审核">
                <template slot-scope="scope">

                    <el-tag
                    closable
                    :type="scope.row.tags === '已审核' ? 'success' : 'primary'"
                    
                    @close="checkedNews(scope.$index, scope.row)"
                    :disable-transitions="false"
                   >
                    {{scope.row.tags}}
                    </el-tag>
                   
                    
                </template>
            </el-table-column>
            
            <el-table-column
            fixed="right"
            width="200"
            label="操作">
                <template slot-scope="scope">
                    
                    <el-button
                    size="mini"
                    type="primary"
                    
                    @click="handleEdit(scope.$index, scope.row)">修改</el-button>
                    <el-button
                    size="mini"
                    type="danger"
                     
                    
                    @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>


        </el-table>
        <el-pagination
        class='pagination'
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page"
        :page-sizes="[9]"
        :page-size="size"
        layout="total, prev, pager, next, jumper"
        :total="total">
        </el-pagination>

    </div>
</template>

<script>
const follow = ['跟进中','已上门','已订单','客户流失','已合同'];
import axios from 'axios'
import { mapState,mapMutations } from 'vuex'
export default {
    name:'Table',
    data() {
        return {

            total:0,
            page: 1,
            size:9,
            filters:[{ text: '长沙', value: '长沙' }, { text: '外地', value: '外地' }],
            data:[],
            axiosUrl:'',
            finalUrl:'',
            detailUrl:'',
            listIndex:'',
            inputFilter:[],
            inputFilters:[],
            form: {
                follow:follow,
                checkedFollow: [],
                inputman: '',
                belongList:[],
                start:'',
                end:'',
                phone:'',
                local:''
                },
            formData: new FormData(),
            pickerOptions2: {
                shortcuts: [{
                    text: '最近一周',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近一个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
                    picker.$emit('pick', [start, end]);
                    }
                }, {
                    text: '最近三个月',
                    onClick(picker) {
                    const end = new Date();
                    const start = new Date();
                    start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
                    picker.$emit('pick', [start, end]);
                    }
                }]
                },
                value4: [new Date(2000, 10, 10, 10, 10), new Date(2000, 10, 11, 10, 10)],
                timeValue: ''    
                }
    },
    computed:{
        ...mapState(['baseUrl','currentPage','shencha_scope','zuzhang_scope','kefu_scope','scope','userName'])
    },
    activated() {
        console.log(this.form)
        this.init()
    },
    methods: {
        onSubmit() {
            // console.log(this.timeValue)
             
            if(this.timeValue!=''){
                if(this.timeValue!=null){
                    var time1 = Number(this.timeValue[0]).toString();
                    var time2=  Number(this.timeValue[1]).toString();
                }else{
                    var time1=""
                    var time2=""
                }
                
            }else{
               var time1=""
               var time2=""
            }
            // console.log(time1)
            this.form.start = time1.substr(0,10);
            this.form.end =  time2.substr(0,10);
            var startTime = this.form.start;
            var endTime = this.form.end;
            var phone = this.form.phone;
            var local = this.form.local;
            var inputman = this.form.inputman;
            var checkedFollow = this.form.checkedFollow;
            // console.log(this.timeValue[0])
            axios.get(
                this.baseUrl+'cms/searchUsernews',
                {
                    params:{
                        size:this.size,
                        page:this.currentPage,
                        startTime:startTime,
                        endTime:endTime,
                        local:local,
                        inputman:inputman,
                        phone:phone,
                        follow:checkedFollow
                    }
                })
            .then(this.getSearchSucc)
            
        },
        getSearchSucc(response){
            console.log(response)
            this.data = response.data.data
            this.total = response.data.count
            this.page = parseInt(response.data.current_page)
        },
        toInputFilter(inputFilter){
            for(var i=0;i<inputFilter.length;i++){
                this.inputFilters.push({text: inputFilter[i], value: inputFilter[i]})
            }
        },
        filterTag(value, row) {
        return row.where === value;
        },
        filterInputer(value, row) {
        return row.inputman === value;
        },
        init(){
            
            this.getbelong()
            this.getListInfoByPage()
            if(this.scope < this.zuzhang_scope){
                this.form.inputman = this.userName;
                
            }
        },
        getbelong(){
             axios.get(
                this.baseUrl+'cms/getBelong',{
                    params: {
                    id: true
                    }
                })
            .then(this.getBelongSucc)
        },
        getBelongSucc (result){      
            this.form.belongList = result.data;
        },
        getListInfoByPage (){
            if(this.scope < this.zuzhang_scope){
                this.axiosUrl = this.baseUrl+'cms/getPesonAll';
                
            }else if(this.scope == this.zuzhang_scope){
                 this.axiosUrl = this.baseUrl+'cms/getLeaderAll';
            }else{
                this.axiosUrl = this.baseUrl+'cms/getAll';
            }
            axios.get(
                this.axiosUrl,
                {
                    params:{
                        size:this.size,
                        page:this.currentPage,
                        inputer:this.userName
                    }
                })
            .then(this.getInfoSucc)
        },
        getInfoSucc (response){
            console.log(response)
            this.data = response.data.data
            this.total = response.data.count
            this.page = parseInt(response.data.current_page)
            this.inputFilter = response.data.inputman
            this.toInputFilter(this.inputFilter)
           
            
        },
        handleSizeChange(val) {
            this.size = val
            this.getListInfoByPage()
        },
        handleCurrentChange(val) {
            this.page = val
            this.changeCurrentPage(val)
 
                if(this.form.checkedFollow!=""||this.form.inputman!=""||this.form.local!=""
                ||this.form.phone!=""||this.timeValue!=""){
                    this.onSubmit()
                }else{
                    this.getListInfoByPage()
                }

            
            
            
        },
        ...mapMutations(['changeCurrentPage','changeActive']),
         handleEdit(index, row) {
            this.$router.push({ path: '/CMS/CMSChange', query: { id: row.id}})
            this.changeActive('/CMS/CMSChange')

        },
        handleDelete(index, row) {
            this.listIndex = index;
             if(this.scope < this.shencha_scope){
                this.$message({
                    message: '您非审查员，无权删除',
                    type: 'error',
                    duration:'3000',
                    showClose:true,
                    });
                return false;
            }
            this.delete(row.id)

        },
        delete(id){
            axios.get(
                this.baseUrl+'cms/delete',
                {
                    params:{
                        id:id,
                        
                    }
                })
            .then(this.deleteSucc)
        },
        deleteSucc(response){
            var that = this;
            if(response.data==1){
                this.$message({
                    message: '删除成功',
                    type: 'success',
                    duration:'3000',
                    showClose:true,
                    });
                this.data.splice(that.listIndex,1)    
            }else if(response.data==0){
                 this.$message({
                    message: '删除失败',
                    type: 'warning',
                    duration:'3000',
                    showClose:true,
                    });
                    
            }
        },
        checkedNews(index,row) {
            if(this.scope < this.shencha_scope){
                
                this.$message({
                    message: '您非审查员，无权更改',
                    type: 'warning',
                    duration:'3000',
                    showClose:true,
                    });
                return false;

            }else{
                
            }
            if(row.tags=='已审核'){
                row.tags = '未审核';
            }else{
                row.tags = '已审核';
            }
            axios.get(
                this.baseUrl+'cms/checkedman',
                {
                    params:{
                        id:row.id,
                        tags: row.tags
                    }
                })
            .then(this.checkedSucc)
            
        },
        checkedSucc(response){
            if(response.data){
                 this.$message({
                    message: '审查成功',
                    type: 'success',
                    duration:'3000',
                    showClose:true,
                    });

            }
        }

    },
}
</script>


<style>
.title{
    font-size: 18px;
    width:98%;
    margin: 1%;
    border-bottom: 1px solid #eef1f5;
    padding-bottom: 20px;
}
   
.el-icon-warning{
    color: #67C23A
}
        
   
  .demo-table-expand {
    font-size: 0;
  }
  .demo-table-expand label {
    width: 90px;
    color: #99a9bf;
  }
  .demo-table-expand .el-form-item {
    margin-right: 0;
    margin-bottom: 0;
    width: 50%;
  }
  .el-form--inline .el-form-item{
    margin-right: 0!important;
  }
  
</style>

